<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      text-color="#fff"
      background-color="#545c64"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item index="1">张文宇</el-menu-item>
      <el-menu-item index="3">主要负责所有vue代码的书写与创造</el-menu-item>
      <el-menu-item index="4">贡献占比50%</el-menu-item>
    </el-menu>
    <div class="h-6" />
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item index="1">丁健平</el-menu-item>
      <el-menu-item index="2">主要负责磨刀设计</el-menu-item>
      <el-menu-item index="3">贡献占比30%</el-menu-item>
    </el-menu>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item index="1">张得帅</el-menu-item>
      <el-menu-item index="2">主要负责重在参与</el-menu-item>
      <el-menu-item index="3">贡献占比20%</el-menu-item>
    </el-menu>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  
  const activeIndex = ref('1')
  const activeIndex2 = ref('1')
  const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  </script>
  <style>
.el-menu-demo{
  display: flex;
  justify-content: space-around;
}</style>